/*  
    debounce防抖
    跟buffer、bufferTime 一样，Rx 有debounce 跟debounceTime 
    一个是传入observable 另一个则是传入毫秒，比较常用到的是debounceTime，
    这里我们直接来看一个范例
*/
var source1 = Rx.Observable.interval(300).take(5);
var example1 = source1.debounceTime(1000);

example1.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 4
// complete

/* 
    这里只印出 4 然后就结束了，因为debounce 运作的方式是每次收到元素，
    他会先把元素cache 住并等待一段时间，如果这段时间内已经没有收到任何元素，则把元素送出；
    如果这段时间内又收到新的元素，则会把原本cache 住的元素释放掉并重新计时，不断反覆。
    source : --0--1--2--3--4|
        debounceTime(1000)
    example: --------------4|  
*/


/* 实现一个监听input框的案例，对input进行300毫秒防抖效果 */
const searchInput = document.getElementById('searchInput');
const theRequestValue = document.getElementById('theRequestValue');

Rx.Observable.fromEvent(searchInput, 'input')
  .debounceTime(300)
  .map(e => e.target.value)
  .subscribe((value) => {
    theRequestValue.textContent = value;
    // 在這裡發 request
  })